<template>
  <div class="hello">
    <image-cropper
      :value="cropperShow"
      @close="cropperShow=false"
      :url="uploadUrl"
      :field="fieldName"
      :noCircle="noCircle"
      :noSquare="noSquare"
      :width="width"
      :height="height"
      :maxSize="maxSize"
      @crop-success="getPicFunc"
      @crop-upload-success="successFunc"
    ></image-cropper>
    <button @click="cropperShow=true" >打开截图组件</button>
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper/index'
export default {
  data () {
    return {
      // 控制组件显示
      cropperShow: false,
      // 上传地址
      uploadUrl: '/kukacms/visitor/picUpload.htm?type=2',
      // 上传文件名
      fieldName: 'files',
      // 预览圆形图片 false为显示
      noCircle: true,
      // 预览方形图片 false为显示
      noSquare: false,
      // 裁剪图片宽高(即所需要图片的宽高)
      width: 300,
      height: 150,
      // 大小限制
      maxSize: 10240,
    }
  },
  methods: {
    // 图片截取后调用，用于获取图片
    getPicFunc (data) {
      console.log(data)
    },
    // 图片上传成功后执行函数
    successFunc (data) {
      console.log(data)
    }
  },
  components: {
    ImageCropper
  }
}
</script>

<style scoped>

</style>
